<template>
  <el-dialog :model-value="visible" title="项目管理" width="80%" @close="handleAddClose">
    <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="项目标识" prop="name">
            <el-input v-model="form.sign" :disabled="projectType=='view'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="form.name" :disabled="projectType=='view'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关人员" prop="userIdList">
            <SelectionInput v-model="form.userIdList" :form-rules="formRules" @change="handleSelectionChange" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="项目地址" prop="address">
            <el-input  v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经度" prop="lon">
            <el-input-number v-model="form.lon" :min="-180" :max="180" :step="0.000001" placeholder="请选择经度" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纬度" prop="lat">
            <el-input-number v-model="form.lat" :min="-90" :max="90" :step="0.000001" placeholder="请选择纬度" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="运维面积" prop="area">
            <el-input-number v-model="form.area" :min="0"  :step="0.000001" placeholder="请选择运维面积" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入企业名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物业名称" prop="propertyName">
            <el-input v-model="form.propertyName" placeholder="请输入物业名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="项目类型" prop="type">
            <el-input v-if="projectType=='view'"  :value="form.type == '0' ?'驻场运维' : '定期维保'" :disabled="projectType=='view'"></el-input>
            <el-select v-else v-model="form.type">
              <el-option v-for="item in projectTypeList" :key="item.id" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="项目描述" prop="description">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="企业标识" prop="companyLogo">
            <imageUpload v-model="form.companyLogo" single-file-mode :type="'pic'" :limit="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物业标识" prop="propertyLogo">
            <imageUpload v-model="form.propertyLogo" single-file-mode :type="'pic'" :limit="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上传照片" prop="picPath">
            <imageUpload v-model="form.picPath" single-file-mode :type="'pic'" :limit="1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer" style="display: block; text-align: center;">
      <el-button @click="handleAddClose">取消</el-button>
      <el-button type="primary" :loading="buttonLoading" @click="onSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import { addProjectInfo, updateProjectInfo } from '@/api/workorder/projectInfo';
import SelectionInput from './selectionInput.vue';
export default defineComponent({
  components: {
    SelectionInput,
  },
  props: {
    visible: Boolean,
    initialData: Object,
    projectType: String,
  },
  // emits: ['update:visible', 'close'],
  emits: ['update:visible', 'close', 'call-parent-method', 'call-parent-page'],
  setup(props, { emit }) {
    const form = ref({
      id: undefined,
      sign: undefined,
      name: undefined,
      address: undefined,
      userIdList: undefined,
      description: undefined,
      picPath: undefined,
      filePath: undefined,
      lon: undefined,
      lat: undefined,
      companyName: undefined,
      companyLogo: undefined,
      propertyName: undefined,
      propertyLogo: undefined,
      area: undefined,
      type: undefined,
    });
    const formRules = {
      id: [
        { required: true, message: "主键不能为空", trigger: "blur" }
      ],
      sign: [
        { required: true, message: "标识不能为空", trigger: "blur" }
      ],
      name: [
        { required: true, message: "项目名称不能为空", trigger: "blur" }
      ],
      address: [
        { required: true, message: "项目地址不能为空", trigger: "blur" }
      ],
      description: [
        { required: true, message: "项目描述不能为空", trigger: "blur" }
      ],
      area: [
        { required: true, message: "运维面积不能为空", trigger: "blur" }
      ],
      userIdList: [
        { required: true, message: '请选择相关人员', trigger: 'blur' }
      ],
      picPath: [
        { required: true, message: "项目照片不能为空", trigger: "blur" }
      ],
      filePath: [
        { required: true, message: "项目附件不能为空", trigger: "blur" }
      ],
      lon: [
        { required: true, message: "经度不能为空", trigger: "blur" }
      ],
      lat: [
        { required: true, message: "纬度不能为空", trigger: "blur" }
      ],
      companyName: [
        { required: true, message: "企业名称不能为空", trigger: "blur" }
      ],
      companyLogo: [
        { required: true, message: "企业标识不能为空", trigger: "blur" }
      ],
      propertyName: [
        { required: true, message: "物业名称不能为空", trigger: "blur" }
      ],
      propertyLogo: [
        { required: true, message: "物业标识不能为空", trigger: "blur" }
      ],
      type: [
        { required: true, message: "项目类型不能为空", trigger: "blur" }
      ],
    };
    const projectTypeList = ref([
      { id: 0, label: '驻场运维', value: '0' },
      { id: 1, label: '定期维保', value: '1' },
    ]);
    const formRef = ref(null);
    const buttonLoading = ref(false);
    const userComponentRef = ref(null);
    // const pathType = ref('');

    // pathType.value = 'pic';
    function handleSelectionChange(ids) {
      console.log('Selected IDs:', ids);
      form.value.userIdList = ids;
    }

    function handleAddClose() {
      emit('update:visible', false);
      // emit('close');
    };

    function onSubmit() {
      formRef.value.validate((valid) => {
        if (valid) {
          let paramsUrl = form.value.id?updateProjectInfo:addProjectInfo;
          // console.log('Form submitted with selected IDs:', form.value);
          buttonLoading.value = true;
          paramsUrl(form.value).then(res => {
            if (res.code=='200') {
              ElMessage.success(res.msg);
              handleAddClose();
              if (form.value.id) {
                // debugger;
                // emit('call-parent-page');
                location.reload();
              } else {
                emit('call-parent-method');
              }
            } else {
              ElMessage.error(res.msg);
            }
          })
        } else {
          console.log('验证失败!!');
          return false;
        }
      });
    }

    function resetForm() {
      form.value = { name: '', address: '', description: '' };
    }

    // 监听 visible 和 initialData
    watch(
      [() => props.visible, () => props.initialData],
      ([newVisible, newInitialData], [oldVisible]) => {
        if (!newVisible) {
          resetForm();
        }
        if (newInitialData) {
          form.value = { ...newInitialData };
        }
      }
    );

    return {
      form,
      projectTypeList,
      formRef,
      formRules,
      handleAddClose,
      handleSelectionChange,
      onSubmit,
    };
  }
})
</script>
